import styled from '@emotion/styled';

import { colors } from '@/config/theme';
import { useNodeVerificationResults } from '@/store/node-verification';

const NodeVerificationLoggerDiv = styled.div`
  box-shadow: 0 0 8px ${colors.gray[300]};
`;
/**
 * 节点校验日志
 */
export const NodeVerificationLogger = memo<{ nodeId: string }>((props) => {
  const resultsStore = useNodeVerificationResults();

  const result = resultsStore.verificationResultList?.find((item) => item.nodeId === props.nodeId);

  if (!result) return null;

  return (
    <>
      <NodeVerificationLoggerDiv
        onClick={(e) => e.stopPropagation()}
        style={{ width: !result.success ? '240px' : '180px' }}
        className="node-logger flex flex-col gap-8 absolute top-48 left-[50%] -translate-x-[50%] px-12 py-8 bg-white rounded-8">
        <div className="result-item">
          <>
            <div>
              <label className="text-14">校验结果: </label>
              {!result.success ? (
                <span className="text-14--bold !text-red">错误</span>
              ) : (
                <span className="text-14--bold !text-green-600">成功</span>
              )}
            </div>
          </>

          {result.errorMsgList ? (
            <div className="output mt-4 text-left  flex flex-col gap-4">
              {result.errorMsgList?.map((error, index) => {
                return (
                  <div key={error} className="result-item !text-red">
                    <span className="text-value-14 !text-red">{index + 1}.</span>
                    <span className="text-value-14 !text-red pl-4">{error}</span>
                  </div>
                );
              })}
            </div>
          ) : null}
        </div>
      </NodeVerificationLoggerDiv>
    </>
  );
});
